<template>
  <div class="app-container">
    <!-- 首页 -->
    <!-- 顶部 -->
    <div class="top">
      <!-- 1 -->
      <div class="item">
        <!-- 顶贴标题 -->
        <div class="item-top">
          <div>总答题数量</div>
          <div class="el-icon-warning"></div>
        </div>
        <!-- 中部 -->
        <div class="item-mid">
          <div class="total">260,560</div>
          <div class="pro">
            <span
              >周同比 12% <i class="el-icon-caret-top" style="color: red"></i
            ></span>
            <span
              >日环比 11%
              <i class="el-icon-caret-bottom" style="color: green"></i
            ></span>
          </div>
        </div>
        <!-- 底部 -->
        <div class="bom">
          <span>日答题数量</span>
          <span>12,423</span>
        </div>
      </div>
      <!-- 2 -->
      <div class="item">
        <div class="item-top">
          <div>试题方向</div>
          <div class="el-icon-warning"></div>
        </div>
        <div class="item-mid direction"></div>
        <!-- 底部 -->
        <div class="bom">
          <span>试题库数量</span>
          <span>10234</span>
        </div>
      </div>
      <!-- 3 -->
      <div class="item">
        <div class="item-top">
          <div>试题科学分布</div>
          <div class="el-icon-warning"></div>
        </div>
        <!-- 中部 -->
        <div class="item-mid subject"></div>
        <!-- 底部 -->
        <div class="bom">
          <span>前端试题数量</span>
          <span>5423</span>
        </div>
      </div>
      <!-- 4 -->
      <div class="item">
        <div class="item-top">
          <div>上周试题新增</div>
          <div class="el-icon-warning"></div>
        </div>
        <!-- 中部 -->
        <div class="item-mid add"></div>
        <!-- 底部 -->
        <div class="bom">
          <span>上周新增总量</span>
          <span>12423</span>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="bottom">
      <div class="tabs">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="前端学科" name="first">
            <div class="Trend">
              <div class="chart front"></div>
              <div class="rank">
                <div class="title">学科试题数量排名</div>
                <div class="sort">
                  <div class="row" v-for="(item, index) in list" :key="index">
                    <!-- 动态class :class= {类名: 布尔值} -->
                    <div class="left"><div class="order" :class="{active: index < 3}">{{index + 1}}</div>{{item.name}}</div>
                    <div class="right">{{item.num}}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="java学科" name="second">
            <div class="Trend">
              <div class="chart java"></div>
              <div class="rank">
                <div class="title">学科试题数量排名</div>
                <div class="sort">
                  <div class="row" v-for="(item, index) in list" :key="index">
                    <!-- 动态class :class= {类名: 布尔值} -->
                    <div class="left"><div class="order" :class="{active: index < 3}">{{index + 1}}</div>{{item.name}}</div>
                    <div class="right">{{item.num}}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="bom_little">前端与java学科试题走势图</div>
    </div>
  </div>
</template>

<script>
//引入echarts
import * as echarts from "echarts";

export default {
  name: "Dashboard",
  data() {
    return {
      activeName: 'first',
      list: [
        {name: '前端', num: 5324},
        {name: 'java', num: 3324},
        {name: '大数据', num: 1324},
        {name: 'C++', num: 1001},
        {name: 'UI', num: 964},
        {name: 'php', num: 586},
        {name: 'python', num: 403},
        {name: '测试', num: 122}
      ]
    };
  },
  mounted() {
    this.questionDirection(document.querySelector(".direction"));
    this.questionSubject(document.querySelector(".subject"));
    this.questionAdd(document.querySelector(".add"));
    this.frontChart(document.querySelector(".front"));
    this.javaChart(document.querySelector(".java"))
  },
  methods: {
    // 试题方向图表 雷达图
    questionDirection(domName) {
      var myChart = echarts.init(domName);
      var option = {
        title: {
          text: "",
        },
        // 图例
        // legend: {
        //   data: ["Allocated Budget", "Actual Spending"],
        // },
        radar: {
          center: ["50%", "55%"],
          // shape: 'circle',
          indicator: [
            { name: "逻辑思维", max: 6500 },
            { name: "项目相关", max: 16000 },
            { name: "高阶技术", max: 30000 },
            { name: "基础知识", max: 38000 },
            { name: "理论基础", max: 52000 },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: "Allocated Budget",
              },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 试题学科 饼图
    questionSubject(domName) {
      const myChart = echarts.init(domName);
      var option = {
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        series: [
          {
            name: "学科分布",
            type: "pie",
            radius: [15, 60],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              // borderRadius: 8,
            },
            data: [
              { value: 320, name: "前端" },
              { value: 240, name: "java" },
              { value: 149, name: "python" },
              { value: 100, name: "c++" },
              { value: 59, name: "UI" },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    // 试题新增 柱状图
    questionAdd(domName) {
      const myChart = echarts.init(domName);
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "0%",
          right: "0%",
          top: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: true,
            },
          },
        ],
        color: ['#2ec7c9', '#b6a2de', '#5ab1ef'],
        series: [
          {
            name: "单选题",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "多选题",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "简答题",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [150, 232, 201, 154, 190, 330, 410],
          },
        ],
      };
      myChart.setOption(option);
    },
    handleClick(tab, event) {
        // console.log(tab, event);
    },
    // 前端走势图
    frontChart(domName) {
      const myChart = echarts.init(domName)
      var option = {
          tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月', '九月','十月','十一月','十二月'],
          axisLine: {
              lineStyle: {
              color:'#3888fa',
            }
          }
        },
        yAxis: {
          type: 'value',
            axisLine: {
            show: true,
            lineStyle: {
              color:'#3888fa',
            },
          },
        },
        grid: {
          top: '5%',
          bottom: '10%',
          left: '6%',
          right: '3%'
        },
        series: [
          {
            name: "试题数量",
            color: ['#3888fa'],
            data: [1330, 1290, 934, 1320, 820, 932, 820, 901, 932, 901, 934, 1290, 1330],
            type: 'line',
            smooth: true
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // java走势图
    javaChart(domName) {
    // console.log('domName', domName);
      const myChart = echarts.init(domName)
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月', '九月','十月','十一月','十二月'],
          axisLine: {
              lineStyle: {
              color:'#3888fa',
            }
          }
        },
        yAxis: {
          type: 'value',
            axisLine: {
            show: true,
            lineStyle: {
              color:'#3888fa',
            },
          },
        },
        grid: {
          top: '5%',
          bottom: '10%',
          left: '6%',
          right: '3%'
        },
        series: [
          {
            name: "试题数量",
            color: ['#3888fa'],
            data: [934, 1330, 820, 932, 820, 901, 1290, 1320,  932, 901, 934, 1290, 1330],
            type: 'line',
            smooth: true
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  // &-container {
  //   margin: 30px;
  // }
  // &-text {
  //   font-size: 30px;
  //   line-height: 46px;
  // }
  .top {
    display: flex;
    .item {
      width: 334px;
      height: 242px;
      padding: 10px 20px;
      background-color: #ffffff;
      margin-right: 20px;
      .item-top {
        display: flex;
        justify-content: space-between;
        color: #97a8be;
        font-size: 14px;
      }
      .item-mid {
        width: 100%;
        height: 164.2px;
        // border: 1px solid red;
        border-bottom: 1px solid #ccc;
        // border: 1px solid pink;
      }
      .bom {
        font-size: 14px;
        margin: 10px 0;
        span {
          margin-right: 8px;
        }
      }
    }
    .item:last-child {
      margin-right: 0;
    }
    .item:nth-child(1) {
      .item-mid {
        // padding: 10px;
        .total {
          height: 140px;
          line-height: 140px;
          padding-left: 20px;
          font-size: 30px;
        }
        .pro {
          color: #303133;
          padding-bottom: 5px;
          span {
            margin-right: 15px;
          }
        }
      }
    }
  }
  .bottom {
    position: relative;
    width: 100%;
    height: 400px;
    margin-top: 20px;
    background-color: #ffffff;
    padding: 20px 10px;
    .tabs {
      .Trend {
      width: 100%;
      height: 300px;
      display: flex;
      justify-content: space-between;
      .chart {
        // width: 845px; 
        flex: 2;
        height: 300px;
        // border: 1px solid pink;
        padding: 10px 0;
        // background-color: pink;
      }
      .rank {
        // margin-left: 20px;
        flex: 1;
        // width: 412px; // 这个不应该是写死的
        height: 100%;
        // border: 1px solid pink;
        padding: 0 10px;
        .title {
          padding: 10px 0;
          margin-bottom: 15px;
          font-size: 18px;
        }
        .sort {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 230px;
          .row {
            display: flex;
            justify-content: space-between;
            color: #595979;
          .left {
            display: flex;
            font-size: 15px;
            .order {
              width: 20px;
              height: 20px;
              margin-right:30px;
              background-color: #f5f5f5;
              border-radius: 50%;
              text-align: center;
              line-height: 20px;
              font-size: 12px;
              color: black;
            }
            // 序号 1 2 3 样式
            .active {
              width: 20px;
              height: 20px;
              margin-right:30px;
              background-color: #314659;
              border-radius: 50%;
              text-align: center;
              line-height: 20px;
              font-size: 12px;
              color: #ffffff;
            }
          }
        }
        }
        
        
      }
    }
    }
    .bom_little {
      position: absolute;
      top: 20px;
      right: 20px;
      color: #9999a6;
      font-size: 17px;
    }
    
  }
}
</style>
